<template>
  <div class="content box-sizing-box">
    <Header
      :companyProvStatsList="companyProvStatsList"
      :title="'雷泽售能经纬'"
      :rightCon="{
        title: '雷泽矩阵',
        path: '/DataScreen',
      }"
      :defualPro="defualPro"
      :screenType="'storageAndSale'"
      @changePro="(e) => init(e)"
    />
    <div class="content_container">
      <div class="content_container_left">
        <div class="left_head">
          <div class="title">
            <div class="indicator"></div>
            <span>储售收益排行</span>
            <a-tooltip placement="right" :trigger="'click'">
              <template #title>
                <a-date-picker
                  v-model:value="month"
                  picker="month"
                  @change="getData"
                  format="YYYY-MM"
                  valueFormat="YYYY-MM"
                />
              </template>
              <a-button type="link" :size="size">
                <template #icon>
                  <EditOutlined :style="{ color: '#1677ff' }" />
                </template>
              </a-button>
            </a-tooltip>
          </div>
          <a-select
            v-model:value="selectedType"
            class="type-select"
            :bordered="false"
            :popup-class-name="'custom-dropdown'"
            style="width: 160px"
            :size="size"
            @change="getData"
          >
            <a-select-option
              v-for="item in TYPE_OF_INCOME"
              :key="item.type"
              :label="item.name"
              :value="item.type"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </div>
        <div class="left_list">
          <ul>
            <li
              v-for="(item, index) in rankList"
              :key="index"
              class="rank-item"
            >
              <div class="rank-number" :class="`rank-${index + 1}`">
                {{ index + 1 }}
              </div>
              <div class="company-name">{{ item.name }}</div>
              <div class="progress-bar">
                <div
                  class="progress"
                  :style="{
                    width: `${item.percentage > 0 ? item.percentage : 0}%`,
                  }"
                ></div>
              </div>
              <div class="value">{{ item.value }}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="content_container_center m-lr25 flex flex-column">
        <!--  <div class="content_container_center_top">
          <div class="flex-center a-center top">
            <div class="top_cap">
              <div class="top_cap_title">储售综合收益（元）</div>
              <div class="flex-start mt10">
                <div
                  class="top_cap_num"
                  v-for="(item, index) in capList"
                  :key="index"
                  :class="{ flip: item.isFlipping }"
                >
                  {{ item.value }}
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <div class="content_container_center_map">
          <div class="map" ref="map"></div>
        </div>
        <div class="content_container_center_bottom">
          <div class="title">
            <div class="indicator"></div>
            <span>策略对比</span>
          </div>
          <div class="strategy-chart">
            <div
              ref="strategyChart"
              id="strategyChart"
              class="strategyChart"
            ></div>
          </div>
        </div>
      </div>
      <div class="content_container_right">
        <div class="mt10">
          <div class="topConBox flex a-center blueGreen">
            <div class="topConIcon"></div>
            <div class="flex a-center">
              <div class="content_container_right_font_bigTitle">
                售储用户数量
              </div>
              <div class="content_container_right_font_smallTitle ml10">
                <span>{{ rankList.length || "--" }}</span
                >家
              </div>
            </div>
          </div>
          <div class="topConBox flex a-center green mt5">
            <div class="topConIcon"></div>
            <div class="flex a-center">
              <div class="content_container_right_font_bigTitle">
                售储总容量
              </div>
              <div class="content_container_right_font_smallTitle ml10">
                <span>44.25<!-- {{ dazzlingObj.totalCap || "--" }} --></span>MWh
              </div>
            </div>
          </div>
        </div>
        <div class="mt10">
          <div class="left_head">
            <div class="title">
              <div class="indicator"></div>
              <span>储售收益统计</span>
              <a-tooltip placement="right" :trigger="'click'">
                <template #title>
                  <a-date-picker
                    v-model:value="year"
                    picker="year"
                    @change="getStat"
                    placeholder="请选择年份"
                    format="YYYY"
                    valueFormat="YYYY"
                    :disabled-date="disabledDate"
                  />
                </template>
                <a-button type="link" :size="size">
                  <template #icon>
                    <EditOutlined :style="{ color: '#1677ff' }" />
                  </template>
                </a-button>
              </a-tooltip>
            </div>
            <div class="incomeChart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import Header from "./conpoments/header.vue"
import { SyncOutlined, EditOutlined } from "@ant-design/icons-vue"
import { TYPE_OF_INCOME } from "@/constants/dataScreen"
import IndexSASGDmap from "./config/IndexSASGDmap"
import gd from "./json/gdAll.json"
import china from "./json/china.json"
import indexmap from "./config/Indexmap"
import * as echarts from "echarts"
import { chartOption } from "./config/Strategy"
import { incomeChartOption } from "./config/IncomeChart"
import moment from "moment"
import { cloneDeep } from "lodash-es"
import router from "@/router"
const $api = inject("$api")
const disabledDate = (current) => {
  // 获取当前年份
  const currentYear = new Date().getFullYear()
  // 获取日期的年份
  const year = current.year()
  // 禁用小于等于2024年和大于当前年份的日期
  return year < 2024 || year > currentYear
}
//获取省份
const companyProvStatsList = ref([])
const getCompanyProvStats = async () => {
  let res = await $api.dazzlingProv()
  companyProvStatsList.value = res.data
  return res.data
}
/* onMounted(() => {
  getCompanyProvStats()
  getData()
  getIncome()
}) */

const selectedType = ref(1)
const month = ref()
const size = "small"
const rankList = ref([])
const year = ref(null)
// 初始化
const nowProv = ref(440000)
const init = async (e) => {
  if (e === 0) {
    nowProv.value = null
  } else if (e !== undefined && e !== null) {
    nowProv.value = e
  }

  getCompanyProvStats()
  getData()
  getStat()
  handleQuery()
  await getIncome()
  changeMap(e)
}
//切换地图
const changeMap = async (e) => {
  switch (e) {
    case 440000:
      setGDMap()
      defualPro.value = 440000
      break
    case 0:
      setMap()
      defualPro.value = 0
      break
    default:
      setGDMap()
      defualPro.value = 440000
      break
  }
}

const rawData = ref([])
const getData = async () => {
  let params = {
    provId: nowProv.value || null,
    month: month.value,
    type: selectedType.value,
  }
  const res = await $api.dazzlingRsanking(params)
  if (res.code === 0) {
    rawData.value = res.data
    // 找出最大值
    const maxValue = Math.max(
      ...rawData.value.map((item) => {
        // 检查 income 是否为字符串
        return typeof item.income === "string"
          ? Number(item.income.replace(/,/g, ""))
          : Number(item.income)
      })
    )
    // 计算百分比
    rankList.value = rawData.value.map((item) => {
      // 检查 income 是否为字符串
      const numValue =
        typeof item.income === "string"
          ? Number(item.income.replace(/,/g, ""))
          : Number(item.income)
      const percentage = Math.round((numValue / maxValue) * 100)
      return {
        name: item.stationName,
        value: item.income,
        percentage,
      }
    })
  }
}
// 综合收益
const capList = ref([])
let updateTimer = null // 添加定时器变量
let prevIncome = 0 // 记录上一次的收益值
let dazzlingObj = ref({})
const getIncome = async () => {
  /*  const initialIncome = 7275564
  const randomIncrement = Math.floor(Math.random() * 10) + 1
  const storedIncome = initialIncome + randomIncrement */
  const res = await $api.dazzlingMap({ provId: nowProv.value })
  if (res.code === 0) {
    dazzlingObj.value = res.data
    const currentIncome = res.data.incomeChange
    //const formattedIncome = currentIncome.toLocaleString()
    //计算总容量
    if (res.data.list && res.data.list.length > 0) {
      const totalCapValue = res.data.list.reduce(
        (sum, item) => sum + (item.totalCap || 0),
        0
      )
      dazzlingObj.value.totalCap = parseFloat(totalCapValue.toFixed(2))
    }

    if (list.value.length === 0) {
      list.value = res.data.list
    }
    // 如果是第一次加载，直接设置值
    /* if (prevIncome === 0) {
      capList.value = formattedIncome.split("").map((num) => ({
        value: num,
        isFlipping: false,
      }))
      prevIncome = currentIncome
      return
    }

    // 找出变化的位置并更新
    const prevStr = prevIncome.toLocaleString()
    const newStr = formattedIncome
    const newDigits = newStr.split("")

    capList.value = newDigits.map((digit, index) => {
      const shouldFlip = prevStr[index] !== digit
      return {
        value: digit,
        isFlipping: shouldFlip,
      }
    })

    // 重置翻牌状态
    setTimeout(() => {
      capList.value = capList.value.map((item) => ({
        ...item,
        isFlipping: false,
      }))
    }, 600)

    prevIncome = currentIncome */
  }
}

//地图处理
const map = ref(null)

//广东地图
const list = ref([])
let currentChart = null
const setGDMap = async () => {
  echarts.registerMap("china", gd)

  const { series } = IndexSASGDmap
  //处理地图柱状
  gd.features.forEach((item) => {
    const name = item.properties.name
    const center = item.properties.center
    if (name && center) {
      geoCoordMap.value[name] = center
    }
  })
  series[0].data = list.value
  //series[1].data = barData(list)
  //series[2].data = lineData(list)

  series[3].data = convertData(list.value)

  if (currentChart) {
    currentChart.dispose()
  }
  var myChart = echarts.init(map.value)
  currentChart = myChart
  myChart.off("click")
  myChart.off("georoam")
  myChart.clear()
  myChart.resize()

  // 修改配置，添加tooltip的触发配置
  const updatedOption = {
    ...IndexSASGDmap,
    tooltip: {
      ...IndexSASGDmap.tooltip,
      triggerOn: "none", // 设置为none，这样tooltip就不会自动消失
      alwaysShowContent: true, // 设置为true，保持tooltip显示
    },
  }

  myChart.setOption(updatedOption)

  // 显示初始tooltip
  myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 3,
    dataIndex: 0,
  })

  // 只在鼠标移入effectScatter时触发tooltip的显示/隐藏
  myChart.on("mouseover", { seriesIndex: 3 }, function (params) {
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 3,
      dataIndex: params.dataIndex,
    })
  })
}
//全国地图
let getCustomerList = computed(() => {
  return companyProvStatsList.value.filter((item) => item.provId === 440000)
})
let geoCoordMap = ref({})
let defualPro = ref(null)
const setMap = async () => {
  echarts.registerMap("china", china)

  const { series } = indexmap
  //处理地图柱状
  china.features.forEach((item) => {
    const name = item.properties.name
    const center = item.properties.center
    if (name && center) {
      geoCoordMap.value[name] = center
    }
  })
  series[0].data = getCustomerList.value
  series[1].data = barData()
  series[2].data = lineData()
  series[3].data = convertData(getCustomerList.value, 2)
  if (currentChart) {
    currentChart.dispose()
  }
  var myChart = echarts.init(map.value)
  currentChart = myChart
  myChart.off("click")
  myChart.off("georoam")
  myChart.clear()
  myChart.resize()
  myChart.setOption(indexmap)
  // 下钻
  myChart.on("click", (param) => {
    switch (param.data[2].provId) {
      case 440000:
        init(440000)
        break
    }
  })
}
//柱子状图
const barData = () => {
  return getCustomerList.value.map((item) => {
    return {
      coords: [
        geoCoordMap.value[item.provName],
        [
          geoCoordMap.value[item.provName][0],
          geoCoordMap.value[item.provName][1] + 1,
        ],
      ],
    }
  })
}
// 提示框
const lineData = () => {
  return getCustomerList.value.map((item) => {
    return [
      geoCoordMap.value[item.provName][0],
      geoCoordMap.value[item.provName][1] + 0.8,
      item,
    ]
  })
}
//点位
var convertData = (data, type = 1) => {
  var res = []

  for (var i = 0; i < data.length; i++) {
    if (type === 1) {
      var geoCoord = geoCoordMap.value[data[i].cityName]
    } else {
      var geoCoord = geoCoordMap.value[data[i].provName]
    }
    if (geoCoord) {
      res.push({
        name: data[i].cityName,
        projectCount: data[i].projectCount,
        projectInc: data[i].projectInc,
        value: geoCoord.concat(data[i].projectCount),
      })
    }
  }
  return res
}

//运行策略
const formulaPower = ref([])
const spotStrategy = ref([])
const handleQuery = async () => {
  // 处理查询逻辑
  const res = await $api.getLines({
    date: moment().format("YYYY-MM-DD"),
    screen: 1,
  })
  if (res && res.code === 0) {
    formulaPower.value = res.data.formulaPower
    spotStrategy.value = res.data.spotStrategy
  } else {
    if (res?.mag) {
      message.error(res.mag)
    } else {
      message.error("查询失败")
    }
  }
  initChart()
}
let chart = null
let strategyChartObj = null
const initChart = async () => {
  await nextTick()
  const chartEl = document.getElementById("strategyChart")
  if (!chartEl) return
  const option = cloneDeep(chartOption)
  // 设置数据

  const baseDate = moment().format("YYYY-MM-DD")
  option.series[0].data = formulaPower.value.map((item) => {
    item.chartEnd = item.endTime
    if (item.startTime !== "00:00" && item.end === "00:00") {
      item.chartEnd = "23:59:59"
    }
    let { startTime, endTime, power, chartEnd } = item
    return {
      value: [
        `${baseDate} ${startTime}`,
        `${baseDate} ${chartEnd}`,
        power,
        item,
      ],
    }
  })
  // 对 spotStrategy.value 按照 startTime 从早到晚排序
  spotStrategy.value.sort((a, b) => {
    return moment(`${baseDate} ${a.startTime}`).diff(
      moment(`${baseDate} ${b.startTime}`)
    )
  })

  // 合并相邻且power相同的数据
  const mergedSpotStrategy = []
  if (spotStrategy.value.length > 0) {
    let currentItem = { ...spotStrategy.value[0] }

    for (let i = 1; i < spotStrategy.value.length; i++) {
      const nextItem = spotStrategy.value[i]

      // 如果当前项与下一项的power相同，且时间相连
      if (
        currentItem.power === nextItem.power &&
        currentItem.endTime === nextItem.startTime
      ) {
        // 更新当前项的结束时间为下一项的结束时间
        currentItem.endTime = nextItem.endTime
        currentItem.chartEnd = nextItem.endTime
      } else {
        // 如果不相同或不相连，将当前项添加到结果数组，并将下一项设为当前项
        mergedSpotStrategy.push({ ...currentItem })
        currentItem = { ...nextItem }
      }
    }

    // 添加最后一项
    mergedSpotStrategy.push({ ...currentItem })
  }
  option.series[1].data = mergedSpotStrategy.map((item) => {
    item.chartEnd = item.endTime
    if (item.startTime !== "00:00" && item.end === "00:00") {
      item.chartEnd = "23:59:59"
    }
    let { startTime, endTime, power, chartEnd } = item
    return {
      value: [
        `${baseDate} ${startTime}`,
        `${baseDate} ${chartEnd}`,
        power,
        item,
      ],
    }
    return item
  })
  if (strategyChartObj) {
    strategyChartObj.dispose()
  }
  //option.series[1].data = props.data.actualData
  chart = echarts.init(chartEl)
  strategyChartObj = chart
  chart.resize()
  chart.clear()
  chart.setOption(option)
}
// 初始化收益图表
//获取数据
const chartList = ref([])
const getStat = async () => {
  let params = {
    provId: nowProv.value || null,
    year: year.value,
  }
  const res = await $api.dazzlingStat(params)
  if (res.code === 0) {
    chartList.value = res.data
    initIncomeChart()
  }
}
let incomeChart = null
const initIncomeChart = () => {
  const chartDom = document.querySelector(".incomeChart")
  if (!chartDom) return
  //const { yAxis, series } = incomeChartOption

  let months = chartList.value.map((item) => item.month).reverse()
  // 更新图表配置
  const option = { ...incomeChartOption }
  option.yAxis = {
    ...option.yAxis,
    data: months,
  }

  // 更新图表数据
  if (chartList.value && chartList.value.length > 0) {
    // 根据月份匹配数据
    option.series[0].data = months.map((month) => {
      const matchedData = chartList.value.find((item) => item.month === month)
      return matchedData ? matchedData.storageIncome : null
    })

    option.series[1].data = months.map((month) => {
      const matchedData = chartList.value.find((item) => item.month === month)
      return matchedData ? matchedData.rate : null
    })
    option.series[2].data = months.map((month) => {
      const matchedData = chartList.value.find((item) => item.month === month)
      return matchedData ? matchedData.combinedIncome : null
    })
    option.series[3].data = option.series[1].data
  } else {
    option.series[0].data = months.map(() => null)
    option.series[1].data = months.map(() => null)
    option.series[2].data = months.map(() => null)
  }

  if (incomeChart) {
    incomeChart.dispose()
  }

  incomeChart = echarts.init(chartDom)

  setTimeout(() => {
    incomeChart.off("click")
    incomeChart.on("click", function (param) {
      router.push({
        path: "/DispatchCenter/SpotMode/RevenueDashboard",
      })
    })
  }, 100)

  incomeChart.setOption(option)
}

onMounted(async () => {
  /* getCompanyProvStats()
  getData()
  getStat()
  await getIncome()
  setGDMap()
  handleQuery()
  initIncomeChart() // 添加初始化收益图表 */
  init()
  // 设置定时器,每5秒更新一次
  updateTimer = setInterval(() => {
    getIncome()
  }, 5000)
})

/* // 监听窗口大小变化，重新调整图表大小
window.addEventListener("resize", () => {
  if (incomeChart) {
    incomeChart.resize()
  }
}) */

// 组件卸载时清除事件监听
onBeforeUnmount(() => {
  if (updateTimer) {
    clearTimeout(updateTimer)
  }
  window.removeEventListener("resize", () => {})
  if (incomeChart) {
    incomeChart.dispose()
  }
  if (strategyChartObj) {
    strategyChartObj.dispose()
  }
  if (currentChart) {
    currentChart.dispose()
  }
})
</script>
<style lang="less" scoped>
@import "@/assets/index.css";

.content {
  width: 100%;
  min-height: 100vh;
  background: url("@/assets/screen/bg.jpg") no-repeat center / 100% 100%;

  &_container {
    margin-top: -60px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 0 20px;
    min-height: calc(100vh - 86px);
    background: url("@/assets/screen/bottomBg.png") no-repeat bottom center /
      98.5% auto;
  }
}
.title {
  display: flex;
  align-items: center;
  gap: 8px;

  .indicator {
    width: 4px;
    height: 16px;
    background: #0093ff;
    border-radius: 2px;
  }

  span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }

  .refresh-icon {
    color: #0093ff;
    font-size: 14px;
    cursor: pointer;
    margin-left: 8px;

    &:hover {
      color: #40a9ff;
    }
  }
}
@layoutWidth: 440px;
.content_container_left {
  padding-left: 10px;
  width: @layoutWidth;

  .left_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;

    :deep(.type-select) {
      width: 120px;

      .ant-select-selector {
        background: rgba(0, 147, 255, 0.1) !important;
        border: 1px solid rgba(0, 147, 255, 0.3) !important;
        border-radius: 4px !important;

        .ant-select-selection-item {
          color: #fff;
        }
      }

      .ant-select-arrow {
        color: #0093ff;
      }

      &:hover .ant-select-selector {
        border-color: #0093ff !important;
      }
    }
  }

  .left_list {
    //padding: 0 12px;
    max-height: calc(100vh - 180px); /* 设置最大高度，根据实际情况调整 */
    overflow-y: auto; /* 添加垂直滚动条 */

    -ms-overflow-style: none;
    position: relative;
    /* 默认隐藏滚动条 */
    &::-webkit-scrollbar {
      width: 6px;
      background: transparent;
      transition: all 0.3s;
    }

    /* 鼠标悬停时显示滚动条 */
    &:hover {
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 147, 255, 0.5);
        border-radius: 3px;
      }
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 147, 255, 0);
      border-radius: 3px;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 6px;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }

    &:hover::after {
      opacity: 1;
    }
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .rank-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      position: relative;

      .rank-number {
        width: 28px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: bold;
        border-radius: 4px;
        margin-right: 10px;
        background-color: #3a5278;
      }

      .rank-1 {
        background-color: #e74c3c;
      }

      .rank-2 {
        background-color: #f39c12;
      }

      .rank-3 {
        background-color: #f1c40f;
      }

      .company-name {
        width: 120px;
        color: #fff;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .progress-bar {
        flex: 1;
        height: 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        margin: 0 10px;
        overflow: hidden;

        .progress {
          height: 100%;
          background: linear-gradient(90deg, #0093ff, #00d4ff);
          border-radius: 5px;
        }
      }

      .value {
        width: 80px;
        text-align: right;
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
.content_container_right {
  width: @layoutWidth;
}
.content_container_center {
  flex-grow: 1;
  .top {
    margin-top: 2vh;
    &_cap {
      &_title {
        font-size: 14px;
        color: #9fceff;
        text-align: center;
      }
      &_num {
        width: 55px;
        height: 60px;
        background: url("@/assets/screen/cap.png") no-repeat top/ 100% 100%;
        font-size: 48px;
        color: #ffff;
        text-align: center;
        line-height: 66px;
        margin-left: 10px;
        transform-style: preserve-3d;
        perspective: 1000px;
        transition: transform 0.6s;

        &.flip {
          animation: flipNumber 0.6s ease-in-out;
        }

        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  .content_container_center_map {
    width: 100%;
    height: calc(81vh - 210px);
    position: relative;
    margin-top: 2vh;
    .map {
      width: 100%;
      height: 100%;
    }
  }
  .strategyChart {
    width: 100%;
    height: calc(21vh + 10px) !important;
  }
}
.content_container_right {
  .incomeChart {
    width: 100%;
    height: calc(100vh - 280px);
    margin-top: 10px;
  }
  .topConBox {
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 5px 10px;
    //width: calc(50% - 10px);
    display: flex;
    align-items: center;
    gap: 10px;
    &:last-child {
      margin-right: 0;
    }
    .topConIcon {
      flex: 0 0 45px;
      width: 45px;
      height: 45px;
    }
    .content {
      flex: 1;
      min-width: 0;
    }
    .content_container_right_font_bigTitle {
      font-size: 14px;
      text-align: center;
    }
    .content_container_right_font_smallTitle {
      text-align: center;
      font-size: 12px;
      color: #fff;
      span {
        font-size: 30px;
        font-weight: bolder;
      }
    }
    &.blueGreen {
      .topConIcon {
        background: url("@/assets/screen/icon10.png") no-repeat left / 100% auto;
      }
      background: linear-gradient(
        to right,
        rgba(79, 175, 241, 0.45),
        rgba(0, 123, 255, 0)
      );
      color: #4faff1;
    }
    &.green {
      .topConIcon {
        background: url("@/assets/screen/icon11.png") no-repeat left / 100% auto;
      }
      background: linear-gradient(
        to right,
        rgba(46, 218, 224, 0.45),
        rgba(0, 123, 255, 0)
      );
      color: #4faff1;
    }
  }
}
:deep(.custom-dropdown) {
  background: #1a2942;

  .ant-select-item {
    color: #fff;

    &-option-active:not(.ant-select-item-option-disabled) {
      background: rgba(0, 147, 255, 0.1);
    }

    &-option-selected:not(.ant-select-item-option-disabled) {
      background: rgba(0, 147, 255, 0.2);
    }
  }
}
</style>
<style lang="less">
@keyframes flipNumber {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

.top_cap_num {
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  display: inline-block;
}
</style>
